<script setup lang="ts">
import {onMounted, ref, shallowRef} from "vue";
import * as echarts from "echarts";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
const chartContainer = ref<HTMLElement | null>(null);
const myCharts = shallowRef<any>();


onMounted(()=>{
  if (chartContainer.value) {
  // 绘制图表
  myCharts.value = echarts.init(chartContainer.value!);
  myCharts.value.setOption({
    title: {
      text: '本周总览',
      padding: [5, 0, 0, 35], // 调整文本内边距
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 坐标轴指示器，坐标轴触发有效
      },
      formatter: function (params: any) {
        let total = 0;
        let result = `<div style="text-align: left;">${params[0].name}</div>`;
        params.forEach((item: any) => {
          total += item.data;
          result += `<div style="text-align: left;">
              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${item.color};margin-right:5px;"></span>
              ${item.seriesName}: ${item.data} 小时
            </div>`;
        });
        result += `<div style="text-align: left; font-weight: bold;">
              总时长: ${total} 小时
            </div>`;
        return result;
      },
    },
    legend: {
      data: [ '劳动安全',
        '应急处理',
        '作业标准',
        '防洪',
        '除雪打冰',
        '消防',
        '特殊连锁设备',
        '暑期劳动安全',]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['西安站','西安车务段','西安西站','新丰镇站','安康车务段','安康东站','汉中车务段','宝鸡东站','宝鸡车务段','铜川车务段','延安车务段','延安运营维修段','韩城车务段'],
      axisLabel: {
        rotate: 45, // 旋转45度
      }
    },
    yAxis: {
      name:'单位（小时)',
      type: 'value'
    },
    series: [
      {
        name: '劳动安全',
        type: 'bar',
        stack: '总量',
        data: [10, 15, 12],
        itemStyle: {
          color: '#67A0EC'
        },
        barWidth: '30%',  // 设置柱状图的宽度为 50%
      },
      {
        name: '应急处理',
        type: 'bar',
        stack: '总量',
        data: [35, 30, 28],
        itemStyle: {
          color: '#51C5E0'
        }
      },
      {
        name: '作业标准',
        type: 'bar',
        stack: '总量',
        data: [20, 25, 22,10,20,30,0,10,20,30,12,34,78],
        itemStyle: {
          color: '#FD8B8B'
        }
      },
      {
        name: '防洪',
        type: 'bar',
        stack: '总量',
        data: [15, 10, 18],
        itemStyle: {
          color: '#FBB070'
        }
      },
      {
        name: '除雪打冰',
        type: 'bar',
        stack: '总量',
        data: [4, 5, 6,9,42,90,53,78,12,34,12,34,13],
        itemStyle: {
          color: '#F1D06B'
        }
      },
      {
        name: '消防',
        type: 'bar',
        stack: '总量',
        data: [12, 20, 15],
        itemStyle: {
          color: '#ABD46A'
        }
      },
      {
        name: '特殊连锁设备',
        type: 'bar',
        stack: '总量',
        data: [6, 7, 5],
        itemStyle: {
          color: '#BCA4EF'
        }
      },
      {
        name: '暑期劳动安全',
        type: 'bar',
        stack: '总量',
        data: [8, 9, 10],
        itemStyle: {
          color: '#B077B5'
        }
      }
    ]
  },);
  }
},)

</script>

<template>
  <div class="chart_main_style">
  <div ref="chartContainer" class="chart_style"></div>
  </div>
</template>

<style scoped>
.chart_main_style{
  width:calc(100vw - 420px);/* 原始宽度减去 30px 的间距 */
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  padding-top: 20px;
}
.chart_style{
  width: 100%;
  height: 325px;
  padding: 0; /* 确保没有内边距 */
}

</style>